<template>
  <div class="list-body " style="position: relative">
    <u-spin fix :loading="spinShow" />
    <info-group>
      <info-group-panel title="模板详情">
        <view-content :data="detailData.detail" :setting="setting" :column="2">
          <template #variableType>
            {{ currentType.label }}
          </template>
          <template #updateTime="{ data }">
            {{ data.updateTime && parseTime(data.updateTime, "YYYY-MM-DD HH:mm:ss") }}
          </template>
        </view-content>
      </info-group-panel>
      <info-group-panel title="字段信息">
        <u-table
          :data="[...detailData.systemFields, ...detailData.commonFields]"
          :columns="fieldsColumns"
          :row-key="data => `${data.name}-${data.eName}`"
        />
      </info-group-panel>
    </info-group>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import {
  message,
  InfoGroup, InfoGroupPanel, ViewContent, libs
} from '@bairong/vix'
import { getFieldDetailApi } from '@api/field'
import filter from '@/filter'
import { fieldsColumns } from '../columns'

const { parseTime } = libs.conversion

export default {
  name: 'FieldDetail',
  components: {
    InfoGroup,
    InfoGroupPanel,
    ViewContent
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    currentModel: {
      type: Object,
      default: undefined
    }
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()
    const spinShow = ref(false)
    const currentType = reactive({ label: '', value: '' })

    const setting = [
      {
        name: 'variableCode',
        label: '模板编号'
      },
      {
        name: 'variableName',
        label: '模板名称'
      },
      {
        name: 'variableType',
        label: '模板类型',
        slot: 'variableType'
      },
      {
        name: 'updateTime',
        label: '更新时间',
        slot: 'updateTime'
      },
      {
        name: 'operatorName',
        label: '操作人'
      }
    ]

    const detailData = reactive({ detail: {}, commonFields: [], systemFields: [] })

    const setCurrentType = type => {
      store.dispatch('getFieldModelTypes').then(res => {
        const targetType = res.find(r => r.value === type)
        if (targetType) {
          currentType.value = targetType.value
          currentType.label = targetType.label
        }
      })
    }

    onMounted(() => {
      const { variableId } = route.query
      if (variableId) {
        spinShow.value = true
        getFieldDetailApi({ variableId })
          .then(res => {
            const {
              variableCode,
              variableName,
              variableType,
              updateTime,
              operatorName,
              jsonData,
              outboundCallProcess
            } = res
            detailData.detail = {
              variableCode,
              variableName,
              variableType,
              updateTime,
              operatorName
            }
            detailData.commonFields = jsonData ? JSON.parse(jsonData).map(f => ({
              ...f,
              key: f.eName,
              title: f.name,
              source: 'common',
              sourceText: '变量字段'
            })) : []
            detailData.systemFields = outboundCallProcess ? JSON.parse(outboundCallProcess).map(f => ({
              ...f,
              key: f.eName,
              title: f.name,
              source: 'system',
              sourceText: '内置字段'
            })) : []
            spinShow.value = false
            setCurrentType(variableType)
          })
          .catch(err => {
            message.error(err.message)
            spinShow.value = false
          })
      } else {
        router.back()
      }
    })

    return {
      spinShow,
      setting,
      currentType,
      detailData,
      fieldsColumns,
      parseTime,
      filter
    }
  }
}
</script>
<style lang="less"></style>
